<template>
    <ElDialog v-model="dialogVisible" width="600px" :title="title">
        <el-form ref="formRef" :model="validateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="productCategoryName" :rules="{ required: true, message: '请输入分类名称' }">
                <el-input v-model="validateForm.productCategoryName" type="text"/>
            </el-form-item>
            <el-form-item label="状态" prop="productCategoryStatus" :rules="{ required: true, message: '请选择状态' }">
                <el-radio-group v-model="validateForm.productCategoryStatus" class="ml-4">
                    <el-radio v-for="item in funderStatus" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="productCategoryNote">
                <el-input v-model="validateForm.productCategoryNote" :rows="2" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <ElButton @click="dialogVisible = false">取消</ElButton>
                <ElButton type="primary" @click="submitForm(formRef)">确定</ElButton>
            </span>
        </template>
    </ElDialog>
</template>
<script setup>
import {ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElMessage} from 'element-plus'
import { computed, ref, reactive, onMounted } from 'vue';
import {funderStatus} from "@/utils/enum.js"
import {setProduct} from '@/server/manage/product.js'

const props = defineProps(['modelValue', 'type', 'info'])
const emit = defineEmits(['update:modelValue', "callback"])
const formRef = ref()

const validateForm = reactive({
    "productCategoryName": "",
	"productCategoryStatus": "",
	"productCategoryNote": ""
})
const dialogVisible = computed({
    set:(val) => {
        emit('update:modelValue', val)
    },
    get:() => {
        return props.modelValue
    }
})
const title = computed(() => {
    let obj = {add: '新增',edit: '编辑' }
    return obj[props.type]
})
// 提交
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        let obj = {add: 'save',edit: 'update' } 
        setProduct(validateForm, obj[props.type]).then(res => {
            dialogVisible.value = false
            emit('callback')
            ElMessage({ message: "操作成功！", type: 'success'})
        })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 获取详情
const getDetail = () => {
    for(let key in validateForm) {
        if(props.info[key]) validateForm[key] = props.info[key]
    }
    validateForm.id = props.info.id
}
onMounted(() => {
    if(props.type === 'edit') {getDetail()}
})
</script>